import React, {  } from "react";
import './input.css'

export default function Input({ title, extra, icon, onExtraClick, ...rest }) {


    return (
        <div className="inputContent">
            {title && <span className="inputTitle">{title}</span>}
            <div className="ipnutValueContent">
                <div className="inputEditBackground">
                    {icon && <img className="inputIcon" src={icon} alt="" />}
                    <input className="inputValue" {...rest} />
                </div>
                {extra && <div className="inputExtra" onClick={onExtraClick}>{extra}</div>}
            </div>
            {/* <div className="inputSplitLine"></div> */}
        </div>
    )
}